<template>
  <div id="" class="friendItem">
    <div class="serviceItem">
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531913728925&di=b96a567b33ba9b1bed20b0ece4ea6676&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F09fa513d269759eeef490028befb43166d22df3c.jpg" alt="" class="headImg">
      <div class="serviceBox">
        <h3>木子李</h3>
        <div class="justify-content">
          <span><img :src="badminton" alt="" width="12">&nbsp; 网球&nbsp; 赞666</span>
          <span>
            <img src="@/assets/friendImage/Plusfriends.png" alt="" width="60">
          </span>
        </div>
      </div>
    </div>
    <ul class="introduceImg">
      <li v-for="elem in introduceImgList" :key="elem.key">
        <img :src="elem.imgUrl" alt="">
      </li>
    </ul>
  </div>
</template>
<script>
import {sportsIcon} from '@/utils/sportsIcon.js';
export default {
  name: "",
  data: () => ({
    badminton:'',
    introduceImgList:[{
      imgUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531913728925&di=b96a567b33ba9b1bed20b0ece4ea6676&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F09fa513d269759eeef490028befb43166d22df3c.jpg',
    },{
      imgUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531913728925&di=b96a567b33ba9b1bed20b0ece4ea6676&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F09fa513d269759eeef490028befb43166d22df3c.jpg',
    },{
      imgUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531913728925&di=b96a567b33ba9b1bed20b0ece4ea6676&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F09fa513d269759eeef490028befb43166d22df3c.jpg',
    }]
  }),
  mounted() {
    //do something after mounting vue instance
    console.log(sportsIcon.badminton);
    this.badminton = sportsIcon.badminton;
  }
}
</script>
<style lang="scss" scoped>
.friendItem{
  padding: 10px;
  border-bottom: 1px solid $boxBgcolor;
}
.serviceItem{
  @include flex;
  background: white;
  padding: 10px;
  .headImg{
    width: 50px;height: 50px;
    border-radius: 100%;
  }
  .serviceBox{
    margin-left: 10px;
    @include flexcell;
    color: #6f6f6f;
    font-size: 12px;
    color: $lightColor;
    h3{
      color: #333333;
      font-size: 1rem;
    }
  }
}
.introduceImg{
  @include flex;
  li{
    @include flexcell;
    height: 100px;
    border-radius: 4px;
    margin-left: 10px;
    overflow: hidden;
    &:first-child{
      margin-left: 0;
    }
    img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
